<template>
  <div class="home-containers">
    <div>
      <div class="dataContentHeard">
        <el-form
          ref="formRefqwContent"
          :model="queryFormContent"
          :rules="rulesqwContent"
          inline
        >
          <el-form-item label="查询日期" prop="month">
            <el-date-picker
              v-model="queryFormContent.month"
              :clearable="false"
              type="month"
              value-format="YYYY-MM"
            />
          </el-form-item>

          <el-form-item
            ><el-button type="primary" @click="SubmitContent()">
              <el-icon><Search /></el-icon>搜索</el-button
            >
          </el-form-item>
        </el-form>
        <h2 class="centent">总体数据</h2>
        <div class="dataContent">
          <div class="data-card">
            <div class="zhongti">总数据</div>
            <div class="card-header">
              <div class="icon-wrapper">
                <svg
                  t="1739700696646"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="6846"
                  width="128"
                  height="128"
                >
                  <path
                    d="M865.6 142.4c-0.8-8-8-14.4-16-14.4H174.4c-8 0-15.2 6.4-16 14.4 0 0-30.4 236.8-30.4 241.6 0 41.6 26.4 77.6 64 90.4V880c0 8.8 7.2 16 16 16h608c8.8 0 16-7.2 16-16V474.4c37.6-12.8 64-48.8 64-90.4 0-5.6-30.4-241.6-30.4-241.6zM424 385.6c-12.8 3.2-24 9.6-32 19.2-3.2 4-11.2 11.2-24 11.2s-20-7.2-24-11.2c-8-8.8-18.4-16-30.4-19.2L335.2 192H432l-8 193.6zM560 192l8 193.6a66.4 66.4 0 0 0-32 19.2c-3.2 4-11.2 11.2-24 11.2s-20-7.2-24-11.2c-8-9.6-19.2-16-32-19.2l8-192.8 96-0.8z m40 193.6L592 192h96.8l21.6 193.6c-12 3.2-22.4 9.6-30.4 19.2-3.2 4-11.2 11.2-24 11.2s-20-7.2-24-11.2a66.4 66.4 0 0 0-32-19.2z m-352 19.2c-4 4-11.2 11.2-24 11.2-16.8 0-30.4-12.8-32-29.6 2.4-19.2 14.4-115.2 24-194.4h87.2l-21.6 192.8c-12.8 3.2-24.8 10.4-33.6 20zM576 832H448V704h128v128z m192 0H640V640H384v192H256V474.4c15.2-5.6 29.6-15.2 40-27.2 17.6 20 43.2 32.8 72 32.8s54.4-12.8 72-32.8c17.6 20 43.2 32.8 72 32.8s54.4-12.8 72-32.8c17.6 20 43.2 32.8 72 32.8s54.4-12.8 72-32.8c10.4 12 24.8 21.6 40 27.2V832z m32-416c-12.8 0-20-7.2-24-11.2a68.96 68.96 0 0 0-33.6-20L720.8 192H808c10.4 78.4 22.4 175.2 24 194.4-0.8 16.8-15.2 29.6-32 29.6z"
                    p-id="6847"
                    fill="#6777ef"
                  ></path>
                </svg>
              </div>
              <div class="title-wrapper">
                <div class="number">
                  {{ getTotaldatastore.shop_nums }}<span class="unit">个</span>
                </div>
                <div class="label">店铺数量</div>
              </div>
            </div>
          </div>

          <div class="data-card">
            <div class="zhongti">总数据</div>
            <div class="card-header">
              <div class="icon-wrapper">
                <svg
                  t="1739700777129"
                  class="icon"
                  viewBox="0 0 1448 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="8900"
                  width="128"
                  height="128"
                >
                  <path
                    d="M430.452 596.128c65.924 0.328 125.617-39.358 150.872-100.363 25.255-61.005 11.48-130.865-35.094-177.767-46.574-46.574-116.762-60.677-177.767-35.422-61.005 25.255-100.69 84.62-100.69 150.544 0 89.867 72.811 163.008 162.679 163.008z m762.56 118.73c-30.83-36.735-70.516-65.27-115.45-82.652-68.22-25.583-141.032-37.718-213.845-36.078-72.812-1.968-145.624 10.167-213.845 36.078-44.933 17.383-84.62 45.917-115.45 82.651-29.518 35.423-47.23 79.7-49.853 125.618 0 44.934 36.406 81.34 81.34 81.34h595.617c44.934 0 81.34-36.406 81.34-81.34-2.296-45.918-20.007-90.195-49.854-125.618zM864.045 542.01c87.9 0.328 167.272-52.477 201.054-133.817 33.782-81.011 15.415-174.815-46.902-236.803-61.988-62.317-155.464-81.012-236.803-47.23-81.34 33.454-134.145 112.826-134.145 200.726 0 119.386 96.755 216.796 216.796 217.124z m-343.07 131.194c12.135-25.255-10.823-27.879-25.583-28.535-9.183-0.656-205.973-11.151-300.104 98.395-23.287 27.223-36.078 61.989-36.078 97.739 0 44.934 36.406 81.34 81.34 81.34h183.998c26.567 0 32.47-13.12 27.223-27.223-42.31-111.514 68.22-219.093 69.204-221.716z"
                    p-id="8901"
                    fill="#6777ef"
                  ></path>
                </svg>
              </div>
              <div class="title-wrapper">
                <div class="number">
                  {{ getTotaldatastore.shop_peoples }}<span class="unit">个</span>
                </div>
                <div class="label">店均人数</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="dataClondHeard">
        <el-form ref="formRefqw" :model="queryForm" :rules="rulesqw" inline>
          <el-form-item label="查询日期" prop="month">
            <el-date-picker
              v-model="queryForm.month"
              :clearable="false"
              type="month"
              value-format="YYYY-MM"
            />
          </el-form-item>
          <el-form-item label="查询店铺" prop="ShopId">
            <el-cascader
              style="width: 200px; margin-right: 10px"
              :options="cascaderOptions"
              v-model="queryForm.ShopId"
              placeholder="请选择搜索的店铺"
              @change="handleCascaderChange"
              :props="{ expandTrigger: 'click' }"
            ></el-cascader>
          </el-form-item>

          <el-form-item
            ><el-button type="primary" @click="SubmitEventqw()">
              <el-icon><Search /></el-icon>搜索</el-button
            >
          </el-form-item>
        </el-form>

        <h2 class="centenr">单店纬度数据</h2>
        <el-scrollbar height="350px">
          <el-row :gutter="20">
            <el-col :span="4">
              <div class="stat-card">
                <div class="stat-header">单店纬度数据</div>
                <div class="stat-content">
                  <span class="number">{{ getShopdatastore.plan_peoples }}</span>
                  <span class="unit">人</span>
                  <div class="tag danger">定编人数</div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="stat-card">
                <div class="stat-header">单店纬度数据</div>
                <div class="stat-content">
                  <span class="number">{{ getShopdatastore.total_peoples }}</span>
                  <span class="unit">人</span>
                  <div class="tag danger">总人数</div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="stat-card">
                <div class="stat-header">单店纬度数据</div>
                <div class="stat-content">
                  <span class="number">{{ getShopdatastore.full_peoples }}</span>
                  <span class="unit">人</span>
                  <div class="tag danger">全职人数</div>
                </div>
              </div>
            </el-col>

            <el-col :span="4">
              <div class="stat-card">
                <div class="stat-header">单店纬度数据</div>
                <div class="stat-content">
                  <span class="number">{{ getShopdatastore.part_peoples }}</span>
                  <span class="unit">人</span>
                  <div class="tag warning">兼职人数</div>
                </div>
              </div>
            </el-col>

            <el-col :span="4">
              <div class="stat-card">
                <div class="stat-header">单店纬度数据</div>
                <div class="stat-content">
                  <span class="number">{{ getShopdatastore.part_times }}</span>
                  <span class="unit">小时</span>
                  <div class="tag danger">兼职总工时</div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="stat-card">
                <div class="stat-header">单店纬度数据</div>
                <div class="stat-content">
                  <span class="number">{{ getShopdatastore.costs }}</span>
                  <span class="unit">港元</span>
                  <div class="tag danger">总费用</div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="stat-card">
                <div class="stat-header">单店纬度数据</div>
                <div class="stat-content">
                  <span class="number">{{ getShopdatastore.full_costs }}</span>
                  <span class="unit">港元</span>
                  <div class="tag danger">全职费用</div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="stat-card">
                <div class="stat-header">单店纬度数据</div>
                <div class="stat-content">
                  <span class="number">{{ getShopdatastore.part_costs }}</span>
                  <span class="unit">港元</span>
                  <div class="tag primary">兼职费用</div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="stat-card">
                <div class="stat-header">单店纬度数据</div>
                <div class="stat-content">
                  <span class="number">{{ getShopdatastore.jiaban_times }}</span>
                  <span class="unit">小时</span>
                  <div class="tag success">加班工时</div>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="stat-card">
                <div class="stat-header">单店纬度数据</div>
                <div class="stat-content">
                  <span class="number">{{ getShopdatastore.jiaban_costs }}</span>
                  <span class="unit">港元</span>
                  <div class="tag danger">加班费用</div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-scrollbar>
      </div>
    </div>
  </div>

  <el-dialog
    v-model="isnewval"
    title="请修改密码"
    width="500"
    center
    :show-close="false"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
  >
    <el-form
      style="max-width: 500px"
      :model="editForm"
      label-width="auto"
      ref="editFormRef"
      :rules="rules"
    >
      <el-form-item label="账号" prop="username">
        <el-input disabled v-model="editForm.username" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="editForm.password" />
      </el-form-item>
      <el-form-item>
        <div class="button-content">
          <el-button type="primary" @click="centerDialogVisible">确定</el-button>
          <el-button type="primary" @click="loginOut">退出登录</el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, watch, computed } from "vue";
import { getAllStoreInfo } from "@/api/store";
import { getTotaldata, getShopdata } from "@/api/getHomeData";
import { valAccountList, updateAccountList } from "@/api/account";
import { ElForm, ElMessage, FormRules } from "element-plus";
import { formatDateToYearAndMonth } from "@/utils/date";

import { useUserStore } from "@/stores/user";
const userStore = useUserStore();
import { useMenuStore } from "@/stores/menu";
const menuStore = useMenuStore();
//总体数据
const getTotaldatastore:{
  value?: any;
  shop_peoples?:any;
  shop_nums?:any;
} = ref([]);
const formRefqwContent = ref<InstanceType<typeof ElForm>>();
const queryFormContent = reactive({
  month: formatDateToYearAndMonth(new Date()),
});

//单店纬度数据
const getShopdatastore: {
  value?: any;
  plan_peoples?: any;
  total_peoples?: any;
  full_peoples?: any;
  part_peoples?: any;
  part_times?: any;
  costs?: any;
  full_costs?: any;
  part_costs?: any;
  jiaban_times?: any;
  jiaban_costs?: any;
} = ref([]);
const formRefqw = ref<InstanceType<typeof ElForm>>();
const queryForm = reactive({
  month: formatDateToYearAndMonth(new Date()),
  ShopId: "",
});

const rulesqw = ref<FormRules>({
  ShopId: [{ required: true, message: "门店不能为空", trigger: "blur" }],
  month: [{ required: true, message: "日期不能为空", trigger: "blur" }],
});

const rulesqwContent = ref<FormRules>({
  month: [{ required: true, message: "日期不能为空", trigger: "blur" }],
});

const SubmitContent = async () => {
  formRefqwContent.value?.validate(async (isValid: boolean) => {
    if (isValid) {
      try {
        const getzong = await getTotaldata({
          year: String(queryForm.month).split("-")[0],
          month: String(queryForm.month).split("-")[1],
        });
        if (getzong.code == "200") {
          ElMessage.success("查询成功");
          getTotaldatastore.value = getzong.data.total;
        } else {
          ElMessage.error(getzong.msg);
        }
      } catch (error) {}
    } else {
      ElMessage.error("表单校验失败");
    }
  });
};

const SubmitEventqw = async () => {
  formRefqw.value?.validate(async (isValid: boolean) => {
    if (isValid) {
      try {
        const getdan = await getShopdata({
          year: String(queryForm.month).split("-")[0],
          month: String(queryForm.month).split("-")[1],
          shopid: queryForm.ShopId,
        });
        if (getdan.code == "200") {
          getShopdatastore.value = getdan.data.shop_item;
          ElMessage.success("查询成功");
        } else {
          ElMessage.error(getdan.msg);
        }
      } catch (error) {
        console.error(error);
        ElMessage.error("查询失败");
      }
    } else {
      ElMessage.error("表单校验失败");
    }
  });
};

// 以下是首次登录工作
// 初始化响应式变量
const cascaderOptions = ref([]); //遍历数据
// 定义改变事件处理器
const handleCascaderChange = (value: any) => {
  queryForm.ShopId = value[value.length - 1];
};

const isnewval = ref(false);

const editFormRef = ref();

const editForm = reactive(<object | any>{
  username: "",
  password: "",
});

// 表单验证规则
const rules = reactive({
  username: [{ required: true, message: "账号不能为空", trigger: "blur" }],
  password: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    { min: 6, max: 20, message: "密码长度应为6到20个字符", trigger: "blur" },
  ],
});

// 定义转换函数生成部门选项
function transformDataForCascader(data) {
  return data.map(({ selfid, shop_name, childs }) => ({
    value: selfid,
    label: shop_name,
    children:
      Array.isArray(childs) && childs.length ? transformDataForCascader(childs) : null,
  }));
}

const centerDialogVisible = async function () {
  editFormRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      const res = await valAccountList(editForm.username);

      const isExist = res.data.is_exist;
      if (isExist == "true") {
        await updateAccountList(editForm);
        ElMessage.success("密码修改成功");
        sessionStorage.setItem("is_new", "");
        isnewval.value = false;
      } else {
        ElMessage.warning("账号不存在");
      }
    } else {
      ElMessage.error("表单验证失败，请检查输入");
    }
  });
};

const loginOut = async () => {
  userStore.logout();
  menuStore.clearMenuCache();
  sessionStorage.clear();
};

onMounted(async () => {
  const is_new = sessionStorage.getItem("is_new");
  editForm.username = sessionStorage.getItem("username");

  if (is_new == "1") {
    isnewval.value = true;
  }
  const res = await getAllStoreInfo();
  cascaderOptions.value = transformDataForCascader(res.result);
  if (cascaderOptions.value.length > 0) {
    if (cascaderOptions.value[0].children.length>0) {
       queryForm.ShopId = cascaderOptions.value[0].children[0].value;
    }else{
      queryForm.ShopId = cascaderOptions.value[0].value
    }
    
   
  }

  const getdan = await getShopdata({
    year: String(queryForm.month).split("-")[0],
    month: String(queryForm.month).split("-")[1],
    shopid: queryForm.ShopId,
  });
  if (getdan.code == "200") {
    getShopdatastore.value = getdan.data.shop_item;
  }

  const getzong = await getTotaldata({
    year: String(queryFormContent.month).split("-")[0],
    month: String(queryFormContent.month).split("-")[1],
  });
  if (getzong.code == "200") {
    getTotaldatastore.value = getzong.data.total;
  }
});
</script>

<style lang="scss" scoped>
.dataContentHeard {
  padding-top: 10px;
  padding-left: 15px;
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
  .centent {
    color: #323335;
    transform: translate(20px, 20px);
  }
  .dataContent {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 30px;
    height: 250px;
    align-items: center;

    .data-card {
      background: #fff;
      border-radius: 12px;
      padding: 20px;
      width: 290px;
      height: 200px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
      transition: all 0.3s ease;
      cursor: pointer;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
      }

      .card-header {
        display: flex;
        align-items: flex-start;
        gap: 20px;

        .icon-wrapper {
          background: #f0f2ff;
          border-radius: 8px;
          width: 108px;
          height: 108px;
          display: flex;
          align-items: center;
          justify-content: center;

          .custom-icon {
            font-size: 39px;
            color: #6777ef;
          }
        }

        .title-wrapper {
          flex: 1;

          .number {
            font-size: 32px;
            font-weight: bold;
            color: #303133;
            line-height: 1.2;
            margin-bottom: 8px;
            margin-top: 20px;
            margin-bottom: 20px;
            .unit {
              font-size: 19px;
              margin-left: 20px;
              font-weight: normal;
              color: #909399;
            }
          }

          .label {
            font-size: 28px;
            color: #02060e;
          }
        }
      }
    }
  }
}

.dataClondHeard {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  padding: 10px;
  height: 400px;
  .centenr {
    color: #73757a;
    margin-bottom: 10px;
  }
}

.zhongti {
  margin-bottom: 8px;
  font-size: 16px;
  color: #909399;
}

.home-containers {
  width: 100%;

  el-row {
    transform: translateX(18%);
  }

  .stat-card {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

    .stat-header {
      color: #909399;
      font-size: 14px;
      margin-bottom: 15px;
    }

    .stat-content {
      display: flex;
      align-items: baseline;

      .number {
        font-size: 28px;
        font-weight: bold;
        color: #303133;
        margin-right: 4px;
      }

      .unit {
        color: #000000;
        font-size: 14px;
        margin-right: 10px;
        font-size: 18px;
        font-weight: 500;
      }

      .tag {
        padding: 2px 6px;
        border-radius: 2px;
        font-size: 15px;

        &.warning {
          color: #e6a23c;
          background: #fdf6ec;
        }

        &.danger {
          color: #f56c6c;
          background: #fef0f0;
        }

        &.success {
          color: #67c23a;
          background: #f0f9eb;
        }

        &.primary {
          color: #409eff;
          background: #ecf5ff;
        }
      }
    }
  }
}
</style>
